<template>
  <div class="task-box">
     <div class="task">
                <span>全部任务({{this.$store.state.list.length}})</span>
                <span>已完成({{this.$store.state.list.length-this.$store.getters.Count}})</span>
                <span>未完成({{this.$store.getters.Count}})</span>
            </div>
            <div class="title">
                任务列表
            </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">

.task {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
            box-sizing: border-box;
            padding: 0 10px;
        }
        
        .task span {
            display: inline-block;
            line-height: 24px;
            padding: 10px;
            background-color: lightseagreen;
            border-radius: 5px;
            color: #fff;
        }
        
        .task span:nth-child(3) {
            background-color: red;
        }
        
        .title {
            padding: 10px;
            font-size: 20px;
            font-weight: bold;
        }
</style>